import React,{useState, useEffect}  from "react";
import {
    View,
    Image,
    StyleSheet,
    TouchableOpacity,
    Text

} from 'react-native';
import icon_daily  from '../../../assets/icon_daily.png';
import icon_search from '../../../assets/icon_search.png';
type Prop = {
    tabIndex: number;
    tabChange?: (tabInex:number) => void;
}
export default ({tabIndex, tabChange}:Prop) => {
    const [tabindex, setTabIndex] = useState(1);
    useEffect(()=>{
        setTabIndex(tabIndex);
    },[tabIndex])
    return (
        <View style={styles.root}>
            <TouchableOpacity style={styles.dailyBtn}>
                <Image style={styles.icon}source={icon_daily} />
            </TouchableOpacity>
            <TouchableOpacity style={styles.tarBtn} onPress={()=> {
                setTabIndex(0);
                tabChange?.(0);
            }}>
                <Text style={tabindex=== 0?styles.selectTxt:styles.defaultTxt}>关注</Text>
                {tabindex=== 0 &&<View style={styles.line} />}
            </TouchableOpacity>
            <TouchableOpacity style={styles.tarBtn} onPress={()=>{
                setTabIndex(1);
                tabChange?.(1);
            }}>
                <Text style={tabindex=== 1?styles.selectTxt:styles.defaultTxt} >发现</Text>
                {tabindex=== 1 &&<View style={styles.line} />}
            </TouchableOpacity>
            <TouchableOpacity style={styles.tarBtn} onPress={()=>{
                setTabIndex(2);
                tabChange?.(2);
            }}>
                <Text style={tabindex=== 2?styles.selectTxt:styles.defaultTxt}>上海</Text>
                {tabindex=== 2 &&<View style={styles.line} />}
            </TouchableOpacity>
            <TouchableOpacity style={styles.searchBtn}>
                <Image style={styles.icon}source={icon_search} />
            </TouchableOpacity>

        </View>
    )
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: 48,
        flexDirection: 'row',
        alignItems: 'center',
        // justifyContent: 'center',
        backgroundColor: 'white',
        paddingHorizontal: 16
    },
    icon: {
        width: 28,
        height: 28
    },
    dailyBtn:{
      height: '100%',
      alignItems: 'center',
      justifyContent: 'center',
      paddingRight: 12,
      marginRight: 42
    },
    searchBtn:{
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 12,
        marginLeft: 42
    },
    tarBtn: {
        flex: 1,
        height: '100%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    },
    defaultTxt:{
        fontSize: 15,
        color: '#999',
    },
    selectTxt:{
        fontSize: 16,
        color: '#333'
    },
    line:{
        width: 30,
        height: 2,
        backgroundColor: '#ff2442',
        position: 'absolute',
        borderRadius: 1,
        bottom: 4,
    }
})